<template>
  <div class="main">
    <div class="outDiv">
      <div>
        <div :class="['header', headerHasBackground ? 'headerWrite' : '']">
          <span @click="backToPrv">
            <i class="imgIcon"></i>
          </span>
          <span class="title">历史查询结果</span>
        </div>
        <scrollerEdit lock-x @on-scroll="onScroll">
          <div>
            <div class="mainDiv">
              <ul class="result_list" v-if="historyLists.length > 0">
                <li class="result_item" v-for="(item, index) of historyLists" :key="index">
                  <div class="title_header">
                    <span class="left">卡券号</span>
                    <span class="right" v-if="item.surplusCount == 0">剩余 {{ item.surplusCount }} 次</span>
                    <span class="right" v-else>
                      剩余
                      <b>{{ item.surplusCount }}</b> 次
                    </span>
                  </div>
                  <div class="title_bottom">
                    <span class="left">{{ item.volume }}</span>
                    <button :class="['right', item.surplusCount <= 0 ? 'canNotUse' : '']" :disabled="item.surplusCount <= 0" @click="useVolumeAgain(item.volume)">继续使用</button>
                  </div>
                  <ul class="find_list">
                    <li class="find_item" v-for="(m, n) of item.glResultVos" :key="n">
                      <p class="time">{{ new Date(m.createTime).format('yyyy.MM.dd hh:mm') }}</p>
                      <div class="title">
                        <div class="name">{{ m.academy }}</div>
                        <div class="right" @click="jumpIntoResult(item.volume, m.history, m.academy)">
                          <span class="persent">{{ parseInt(m.probability * 100) }}%</span>
                          <span class="image">
                            <i></i>
                          </span>
                        </div>
                      </div>
                      <div class="line"></div>
                      <ul class="msg_list">
                        <li class="msg_item">
                          <span class="label">考生省份</span>
                          <span class="msg">{{ m.province }}</span>
                        </li>
                        <li class="msg_item">
                          <span class="label">科别</span>
                          <span class="msg">{{ m.division }}</span>
                        </li>
                        <li class="msg_item">
                          <span class="label">目标批次</span>
                          <span class="msg">{{ m.level }}</span>
                        </li>
                        <li class="msg_item">
                          <span class="label">位次</span>
                          <span class="msg">{{ m.precedence }}</span>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
              <div class="noContent" v-else>暂无历史记录~</div>
            </div>
            <div style="width: 100%; height: 3.5rem;"></div>
          </div>
        </scrollerEdit>
        <div class="footer">
          <div class="btn" @click="createNewSearch">新建查询</div>
        </div>
      </div>
    </div>
    <LoginVerification :isShowModal="isShowModal" v-on:fromChildloginVerification="loginVers" headTitle="概率查询服务"></LoginVerification>
  </div>
</template>

<script>
import scrollerEdit from '~/components/scrollerEdit'
import { identityLogin } from '~/api/identity'
import { getState, historyProbabilities } from '~/api/matriculate'
import ls from 'store2'
import { format } from '~/plugins/filter'
import LoginVerification from '~/components/LoginVerification'
import { backAppOrWx } from '~/common/common'
export default {
  components: {
    scrollerEdit,
    LoginVerification,
  },
  data() {
    return {
      isShowModal: false,
      headerHasBackground: false,
      yxkData: null,
      userType: null,
      historyLists: [],
      cardUserd: true, // 卡券已使用状态 ----> true：已使用完，需要新的卡券     false：有未使用完的卡券
    }
  },
  created() {
    this.commonJs.accectAppParame()
  },
  mounted() {
    if (ls.get('yxkData')) {
      this.getUsedCardList()
    } else {
      this.isShowModal = true
    }

    ls.remove('backUrl')
    ls.remove('saveParams')
    // this.commonJs.returnProject("matriculate/history");
  },
  methods: {
    loginVers(data) {
      identityLogin(data)
        .then((res) => {
          if (res.code === '0') {
            let usersData = res.data
            ls.set('yxkData', usersData)
            ls.set('userType', usersData.userType)
            ls.set('tokensyxk', usersData.accessToken)
            this.isShowModal = false
            this.$vux.toast.text('服务授权成功')
            this.getUsedCardList()
          } else {
            this.$vux.toast.text(res.message)
          }
        })
        .catch((error) => {
          this.$vux.toast.text(error)
        })
    },
    goTeaIndexUrl() {
      let abc = window.location.href

      this.jumpUrl = decodeURIComponent(this.commonJs.GetUrlParam('tea_return_url'))
      if (this.jumpUrl) {
        ls.set('jumpsTeaUrl', this.jumpUrl)
        let datas = this.commonJs.GetUrlParam('tea_userData')
        let usersData = JSON.parse(decodeURIComponent(datas))
        ls.set('yxkData', usersData)
        ls.set('userType', usersData.userType)
        ls.set('tokensyxk', usersData.accessToken)
      }
    },

    // 获取已核销的卡券信息
    getUsedCardList() {
      this.$loading('open')

      // product_code: 'sx0040',
      // status: 3 // 2 --> 未核销未过期     3 --> 已核销    4 --> 未核销已过期   all --> 全部
      getState(ls.get('userType'))
        .then((res) => {
          if (res.code == 0) {
            let results = '' // 查询历史记录的卡券集合 --> 使用‘,’拼接
            for (let item = 0; item < res.data.length; item++) {
              results += res.data[item].volume
              if (item < res.data.length - 1) {
                results += ','
              }
            }
            this.getHistoryResults(results)
          } else {
            this.$vux.toast.text('网络故障')
            this.$hideLoading()
          }
        })
        .catch((error) => {
          this.$vux.toast.text(error)
          this.$hideLoading()
        })
    },
    getHistoryResults(string) {
      historyProbabilities({
        userType: ls.get('yxkData').userType,
        volume: string,
      })
        .then((res) => {
          this.$hideLoading()
          if (res.code == 0) {
            this.historyLists = res.data.reverse()
            for (const item of res.data) {
              if (item.surplusCount > 0) {
                ls.set('cardVolume', item.volume)
                ls.set('backUrl', '../matriculate/history')
                this.cardUserd = false
                return
              } else {
                this.cardUserd = true
              }
            }
          }
        })
        .catch((error) => {
          this.$vux.toast.text(error)
        })
    },

    // 滚动事件
    onScroll(position) {
      if (position.top > 0) {
        this.headerHasBackground = true
      } else {
        this.headerHasBackground = false
      }
    },

    jumpIntoResult(volume, history, name) {
      ls.set('cardVolume', volume)
      ls.set('backUrl', '../matriculate/history')
      const sendObj = {
        history: history,
        academyName: name,
      }
      this.goto('/matriculate/results', sendObj)
    },

    backToPrv() {
      backAppOrWx()
    },
    goto(routerName, queryData) {
      this.$router.replace({
        path: routerName,
        query: {
          type: queryData,
        },
      })
    },
    // 新建查询
    createNewSearch() {
      if (this.cardUserd) {
        ls.remove('cardVolume')
      }
      this.$router.push('/matriculate/indexs')
    },
    // 继续使用
    useVolumeAgain(volume) {
      ls.set('cardVolume', volume)
      ls.set('backUrl', '../matriculate/history')
      this.$router.push('/matriculate/indexs')
    },
  },
}
</script>

<style lang="less" scoped>
.outDiv {
  width: 100%;
  height: 100vh;
  background: #f7f7fa;
  position: relative;

  .header {
    width: 100%;
    height: 0.88rem;
    line-height: 0.88rem;
    padding: 0 0.32rem;
    background: transparent;
    text-align: center;
    z-index: 100;
    position: fixed;
    top: 0;
    left: 0;

    .imgIcon {
      margin-top: 0.24rem;
      width: 0.4rem;
      height: 0.4rem;
      display: block;
      background: url('~@/static/sprite/icon_sprites_40.png') -0.1rem -0.1rem;
      background-size: 3rem 2.4rem;
      float: left;
    }

    .title {
      color: #222;
      font-size: 0.36rem;
      font-weight: bold;
      text-align: center;
      height: 0.88rem;
    }
  }
  .headerWrite {
    background: #fff;
  }

  .mainDiv {
    padding: 0 0.3rem;
    margin-top: 1.2rem;
    width: 100%;

    .result_list {
      padding-left: 0;
      list-style: none;
      margin-top: 0.32rem;

      .result_item {
        padding: 0.4rem 0.24rem;
        background: #fff;
        border-radius: 0.1rem;
        margin-bottom: 0.4rem;

        .title_header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 0.16rem;
          padding: 0 0.08rem;

          .left {
            color: #222;
            font-size: 0.3rem;
            line-height: 0.42rem;
            font-weight: bold;
            letter-spacing: 1px;
          }
          .right {
            color: #999;
            width: 1.52rem;
            text-align: center;
            font-size: 0.26rem;
            line-height: 0.37rem;

            b {
              color: @mainColor;
              font-weight: bold;
            }
          }
        }

        .title_bottom {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 0.08rem;

          .left {
            color: @mainColor;
            font-size: 0.36rem;
            line-height: 0.5rem;
          }

          .right {
            width: 1.52rem;
            height: 0.58rem;
            line-height: 0.58rem;
            background: @mainColor;
            border-radius: 0.29rem;
            color: #fff;
            text-align: center;
            font-size: 0.2rem;
            outline: none;
            border: none;
          }
          .canNotUse {
            background: #f7f7fa;
            color: #c7c7c7;
          }
        }

        .find_list {
          list-style: none;
          padding-left: 0;
          margin-top: 0.43rem;

          .find_item {
            width: 100%;
            height: 3.31rem;
            background: #f7f7fa;
            border-radius: 0.1rem;
            margin-bottom: 0.4rem;
            padding: 0.32rem 0.24rem;

            .time {
              color: #999;
              font-size: 0.28rem;
              line-height: 0.4rem;
              margin-bottom: 0.16rem;
            }

            .title {
              display: flex;
              justify-content: space-between;
              align-items: center;

              .name {
                color: #222;
                font-size: 0.36rem;
                line-height: 0.5rem;
                font-weight: bold;
              }

              .right {
                display: flex;
                align-items: center;

                span {
                  color: #f17467;
                  font-size: 0.36rem;
                  line-height: 0.5rem;
                  margin-right: 0.08rem;
                }

                .image {
                  width: 0.4rem;
                  height: 0.4rem;

                  i {
                    display: inline-block;
                    width: 0.4rem;
                    height: 0.4rem;
                    background: url('~@/static/sprite/icon_sprites_40.png') -0.1rem -1.3rem;
                    background-size: 3rem 2.4rem;
                  }
                }
              }
            }

            .line {
              width: 100%;
              height: 1px;
              background: #e5e8ed;
              margin: 0.32rem 0;
            }

            .msg_list {
              list-style: none;
              padding-left: 0;
              display: flex;
              justify-content: flex-start;
              align-items: center;
              flex-wrap: wrap;

              .msg_item {
                width: 2.45rem;

                .label {
                  color: #999;
                  font-size: 0.28rem;
                  line-height: 0.4rem;
                  margin-right: 0.2rem;
                }

                .msg {
                  color: #222;
                  font-size: 0.28rem;
                  line-height: 0.4rem;
                }
              }

              li.msg_item:first-child,
              li.msg_item:nth-child(2) {
                margin-bottom: 0.16rem;
              }
              li.msg_item:first-child,
              li.msg_item:nth-child(3) {
                margin-right: 1rem;
              }
            }
          }

          li.find_item:last-child {
            margin-bottom: 0;
          }
        }
      }
    }

    .noContent {
      text-align: center;
      color: #c7c7c7;
    }
  }

  .footer {
    width: 100%;
    height: 1.52rem;
    background: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 0.24rem 0.64rem;

    .btn {
      width: 6.22rem;
      height: 0.88rem;
      line-height: 0.88rem;
      border-radius: 0.44rem;
      background: @mainColor;
      color: #fff;
      text-align: center;
      font-size: 0.3rem;
      font-weight: bold;
      letter-spacing: 1px;
    }
  }
}
</style>
